<template>
    <div class="custom-div edit-card">
        <h2>自定义内容</h2>
        <div class="text-xs mb-4">你可以在下方区域添加任何链接或者文本，请记住，对于程序员来说，一个优秀的个人网站或者出色的 Github 链接可以让你的简历加分不少。</div>

        <el-form>
            <div v-for="(item, index) in modelValue" :key="index" class="mb-2 flex items-center">
                <el-form-item class="!mb-0">
                    <el-input v-model="item.key" placeholder="例如: 个人网站" class="w-[100px] mr-2" />
                </el-form-item>
                <el-form-item class="!mb-0 flex-1">
                    <el-input v-model="item.value" placeholder="例如: https://github.com/yourname" class="mr-2" />
                </el-form-item>
                <el-button @click="removeItem(index)" type="danger" size="small" :icon="Delete" circle />
            </div>
        </el-form>

        <el-button @click="addItem" type="primary" link :icon="Plus" class="mt-2">
            添加新项目
        </el-button>
    </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => [
            { key: '个人网站', value: 'https://your.personal.com' },
            { key: 'Github', value: 'https://github.com/yourname' }
        ]
    }
})

const emit = defineEmits(['update:modelValue'])

const addItem = () => {
    const newItems = [...props.modelValue, { key: '', value: '' }]
    emit('update:modelValue', newItems)
}

const removeItem = (index) => {
    if (props.modelValue.length > 1) {
        const newItems = [...props.modelValue]
        newItems.splice(index, 1)
        emit('update:modelValue', newItems)
    }
}
</script>

<style lang="scss" scoped></style>